<template>
  <!--  缺寝记录-->
  <div style="margin-top: 80px;margin-left:30px;border: 0 solid red;">
    <el-table
        :data="tableData"
        border
        stripe
        style="width: 100%;position: relative;top:-30px">
      <el-table-column
          fixed
          sortable
          align="center"
          prop="id"
          label="ID"
          width="120">
      </el-table-column>
      <el-table-column
          align="center"
          prop="buildingName"
          label="楼栋">
      </el-table-column>
      <el-table-column
          align="center"
          prop="dormitoryName"
          label="公寓号">
      </el-table-column>
      <el-table-column
          align="center"
          prop="studentName"
          label="学生">
      </el-table-column>
      <el-table-column
          align="center"
          prop="reason"
          label="原因">
      </el-table-column>
      <el-table-column
          align="center"
          prop="status"
          label="状态"
      >
        <template slot-scope="scope">
          <!-- 使用 scoped slot 渲染每一行的状态列 -->
          <el-tag :type="getStatusTagType(scope.row.status)">{{ scope.row.status }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
          align="center"
          prop="createDate"
          label="日期">
      </el-table-column>
    </el-table>
    <el-pagination style="margin-top: 20px;float: right"
                   background
                   layout="prev, pager, next"
                   :page-size="pageSize"
                   :total="total"
                   :current-page.sync="currentPage"
                   @current-change="page">
    </el-pagination>
  </div>

</template>

<script>
export default {
  data() {
    return {
      tableData: null,
      currentPage: 1,
      pageSize: 3,
      total: null,
      key: '',
      value: '',
      ruleForm: {
        key: '',
        value: '',
        page: '',
        size: 3
      },
      rules: {
        key: [
          {required: true, message: '请选择字段', trigger: 'change'}
        ]
      }
    }
  },
  methods: {
    submitForm(formName) {
      const _this = this
      //让翻页复原
      _this.currentPage = 1
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const _this = this
          _this.ruleForm.page = _this.currentPage
          axios.get('http://localhost:9090/absent/search', {params: _this.ruleForm}).then(function (resp) {
            _this.tableData = resp.data.data.data
            _this.total = resp.data.data.total
          })
        }
      });
    },

    page(currentPage) {
      const _this = this
      if (_this.ruleForm.value === '') {
        axios.get('http://localhost:9090/absent/listByStudentId/'+_this.currentUserId+ '/' + currentPage + '/' + _this.pageSize).then(function (resp) {
          _this.tableData = resp.data.data.data
          _this.total = resp.data.data.total
        })
      } else {
        _this.ruleForm.page = _this.currentPage
        axios.get('http://localhost:9090/absent/search', {params: _this.ruleForm}).then(function (resp) {
          _this.tableData = resp.data.data.data
          _this.total = resp.data.data.total
        })
      }
    },

    // 根据状态返回相应的标签类型
    getStatusTagType(status) {
      switch (status) {
        case '请假':
          return 'success';
        case '学生请假':
          return 'warning';
        default:
          return 'danger';
      }
    },
  },
  created() {
    const _this = this
    axios.get('http://localhost:9090/absent/listByStudentId/'+_this.currentUserId +'/1/'+ _this.pageSize).then(function (resp) {
      _this.tableData = resp.data.data.data
      _this.total = resp.data.data.total
    })
  },
  computed: {
    currentUserId() {
      // 假设在 Vuex 中有一个名为 currentUser 的模块，包含用户信息
      return this.$store.state.student.id;
    }
  }
}
</script>